<template>
    <el-dialog :title="dialogFrom.dialogTitle" :model-value="dialogFrom.dialogVisble"
        @input:model-value="updateDialogVisible" align-center width="80%" style="height: 700px;"
        :before-close="onCancel" class="generator-dialog">
        <div class="generator-dialog-box" style="height: 630px;">
            <div class="generator-menu-box">
                <el-menu :default-active="menuActiveName" class="el-menu-vertical-demo" @select="handleSelect">
                    <el-menu-item v-for="(item, index) in menuList" :key="index" :index="item">{{ item }}</el-menu-item>
                </el-menu>
            </div>
            <div class="generator-tab-box">
                <el-button size="small" @click="downloadCode(dialogFrom.infoId)">代码下载</el-button>
                <el-tabs v-model="activeName" class="demo-tabs">
                    <el-tab-pane class="generator-tab-content" v-for="(item, index) in Object.keys(tabInfo)"
                        :key="index" :label="item" :name="item">
                        <pre v-highlight :key="()=>{ return menuActiveName + item}"><code>{{tabInfo[item]}}</code></pre>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </el-dialog>
</template>
<script lang="ts" setup>
// -------------------------------------------------导入相关引用-------------------------------------------------
import { ref, watch } from 'vue';
import { previewGenerate,downloadCode } from '@/api/generator/generator'
// -------------------------------------------------相关参数定义-------------------------------------------------
const props = withDefaults(defineProps<{
    dialogFrom: DialogFrom
}>(), {
    dialogFrom: () => ({
        dialogTitle: '',
        dialogVisble: false,
        infoId: [],
    })
});

const previewGenerateInfo = ref<{ [key: string]: any }>({});
const tabInfo = ref<{ [key: string]: string }>({});
const menuList = ref<string[]>([]);
const activeName = ref('');
const menuActiveName = ref('');
// ---------------------------------------------------事件定义--------------------------------------------------
const emit = defineEmits(['update:dialogFrom']);
// -------------------------------------------------操作方法定义-------------------------------------------------
/**
 * 监听dialogFrom参数
 */
watch(() => props.dialogFrom.dialogVisble, (newValue, oldValue) => {
    if (newValue) {
        getInfoApi();
    }
})

/**
 * 获取表单信息
 */
const getInfoApi = async () => {
    const infoId = props.dialogFrom.infoId;
    if (infoId) {
        await previewGenerate(infoId).then((res) => {
            if (res.data.code === 200) {
                menuList.value = Object.keys(res.data.data);
                previewGenerateInfo.value = res.data.data;
                tabInfo.value = res.data.data[menuList.value[0]];
                activeName.value = Object.keys(tabInfo.value)[0];
                menuActiveName.value = menuList.value[0];
            }
        })
    }
}

const handleSelect = (index: string) => {
    menuActiveName.value = index;
    tabInfo.value = previewGenerateInfo.value[index];
    activeName.value = Object.keys(tabInfo.value)[0];
}

/**
 * 关闭弹窗
 */
const onCancel = () => {
    emit('update:dialogFrom', {
        dialogVisble: false,
        dialogTitle: '',
        infoId: null
    });
}

/**
 * 更新弹窗显示状态
 * @param dialogFromParams 
 * @returns void
 */
const updateDialogVisible = (dialogFromParams: DialogFrom) => {
    emit('update:dialogFrom', dialogFromParams);
}
// -------------------------------------------------实体定义区-------------------------------------------------
/**
 * 弹窗信息
 */
export interface DialogFrom {
    dialogTitle: string;
    dialogVisble: boolean;
    infoId: number | number[];
}
</script>

<style lang="scss" scoped>
.generator-dialog-body {
    width: 100%;
    height: 650px;
}

.generator-dialog-box {
    width: 100%;
    height: 100%;
    display: flex;

    .generator-menu-box {
        width: 10%;
        height: 100%;
        margin-right: 10px;

        .el-menu-vertical-demo {
            height: 100%;
        }
    }

    .generator-tab-box {
        width: calc(90% - 20px);
        height: 100%;

        .demo-tabs {
            width: 100%;
            height: 100%;

            .generator-tab-content {
                width: 100%;
                height: 100%;
                overflow-y: auto;
                text-align: left;
                // background-color: black;
                // color: aliceblue;
                // padding-left: 20px;
            }
        }

    }
}
</style>